<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>看板详情 - {{ data.kanbanCode || '-' }}</span>
        <el-tag class="ml10" :type="statusTagType(data.businessStatus)">{{ statusLabel(data.businessStatus) }}</el-tag>
      </div>

      <!-- 基础信息 -->
      <div class="panel-title">基础信息</div>
      <el-row :gutter="20">
        <el-col :span="12"><div class="item"><b>看板编码：</b>{{ data.kanbanCode }}</div></el-col>
        <el-col :span="12"><div class="item"><b>协议编码：</b>{{ data.frameworkCode }}</div></el-col>
        <el-col :span="12"><div class="item"><b>要货公司：</b>{{ data.receiverCompanyName }}</div></el-col>
        <el-col :span="12"><div class="item"><b>发货公司：</b>{{ data.senderCompanyName }}</div></el-col>
        <el-col :span="12"><div class="item"><b>需求计划部门：</b>{{ data.receiverDeptName }}</div></el-col>
        <el-col :span="12"><div class="item"><b>发货计划部门：</b>{{ data.senderDeptName }}</div></el-col>
        <el-col :span="12"><div class="item"><b>收货仓库：</b>{{ data.receiverWarehouseName }}</div></el-col>
        <el-col :span="12"><div class="item"><b>发货仓库：</b>{{ data.senderWarehouseName }}</div></el-col>
        <el-col :span="12"><div class="item"><b>收货联系人：</b>{{ data.receiverContact }}</div></el-col>
        <el-col :span="12"><div class="item"><b>收货电话：</b>{{ data.receiverPhone }}</div></el-col>
        <el-col :span="12"><div class="item"><b>发货联系人：</b>{{ data.senderContact }}</div></el-col>
        <el-col :span="12"><div class="item"><b>发货电话：</b>{{ data.senderPhone }}</div></el-col>
      </el-row>

      <!-- 物料信息 -->
      <div class="panel-title">物料信息</div>
      <el-table :data="data.materialList || []" border style="width: 100%">
        <el-table-column label="物料编码" prop="materialCode" min-width="120" />
        <el-table-column label="物料名称" prop="materialName" min-width="150" />
        <el-table-column label="规格型号" prop="specification" min-width="120" />
        <el-table-column label="单位" prop="unit" width="80" />
        <el-table-column label="需求数量" prop="requiredQuantity" width="100" align="right" />
        <el-table-column label="单价" prop="unitPrice" width="100" align="right">
          <template slot-scope="scope">
            <span v-if="scope.row.unitPrice">{{ parseFloat(scope.row.unitPrice).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="金额" prop="totalAmount" width="120" align="right">
          <template slot-scope="scope">
            <span v-if="scope.row.totalAmount">{{ parseFloat(scope.row.totalAmount).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="包装规格" prop="packageSpec" width="100" />
        <el-table-column label="包装数量" prop="packageQuantity" width="100" align="right" />
        <el-table-column label="备注" prop="remark" min-width="120" />
      </el-table>

      <!-- 时间配置 -->
      <div class="panel-title">时间配置</div>
      <el-row :gutter="20">
        <el-col :span="12"><div class="item"><b>要求到货时间：</b>{{ data.requiredDeliveryTime }}</div></el-col>
        <el-col :span="12"><div class="item"><b>计划发货时间：</b>{{ data.plannedShipmentTime }}</div></el-col>
        <el-col :span="12"><div class="item"><b>实际发货时间：</b>{{ data.actualShipmentTime || '-' }}</div></el-col>
        <el-col :span="12"><div class="item"><b>实际到货时间：</b>{{ data.actualDeliveryTime || '-' }}</div></el-col>
      </el-row>

      <!-- 业务状态 -->
      <div class="panel-title">业务状态</div>
      <el-row :gutter="20">
        <el-col :span="12"><div class="item"><b>业务状态：</b>{{ statusLabel(data.businessStatus) }}</div></el-col>
        <el-col :span="12"><div class="item"><b>确认状态：</b>{{ confirmStatusLabel(data.senderConfirmStatus) }}</div></el-col>
        <el-col :span="12"><div class="item"><b>打印状态：</b>{{ printStatusLabel(data.printStatus) }}</div></el-col>
        <el-col :span="12"><div class="item"><b>是否紧急：</b>{{ yesNo(data.isUrgent) }}</div></el-col>
      </el-row>

      <!-- 操作记录 -->
      <div class="panel-title">操作记录</div>
      <el-row :gutter="20">
        <el-col :span="12"><div class="item"><b>创建人：</b>{{ data.createBy }}</div></el-col>
        <el-col :span="12"><div class="item"><b>创建时间：</b>{{ data.createTime }}</div></el-col>
        <el-col :span="12"><div class="item"><b>更新人：</b>{{ data.updateBy }}</div></el-col>
        <el-col :span="12"><div class="item"><b>更新时间：</b>{{ data.updateTime }}</div></el-col>
        <el-col :span="24" v-if="data.remark"><div class="item"><b>备注：</b>{{ data.remark }}</div></el-col>
      </el-row>

      <!-- 操作历史 -->
      <div class="panel-title" v-if="data.operationHistory && data.operationHistory.length > 0">操作历史</div>
      <el-table v-if="data.operationHistory && data.operationHistory.length > 0" :data="data.operationHistory" border style="width: 100%">
        <el-table-column label="操作时间" prop="operationTime" width="160" />
        <el-table-column label="操作人" prop="operatorName" width="120" />
        <el-table-column label="操作类型" prop="operationType" width="120" />
        <el-table-column label="操作说明" prop="operationDescription" min-width="200" />
        <el-table-column label="备注" prop="remark" min-width="150" />
      </el-table>

      <!-- 操作按钮 -->
      <div class="mt20">
        <el-button @click="$router.back()">返回</el-button>
        <el-button 
          type="primary" 
          @click="gotoEdit" 
          v-hasPermi="['kanban:order:edit']"
          v-if="canEdit"
        >编辑</el-button>
        <el-button 
          type="success" 
          @click="handleConfirm" 
          v-hasPermi="['kanban:order:confirm']"
          v-if="canConfirm"
        >确认</el-button>
        <el-button 
          type="warning" 
          @click="handlePrintKanban" 
          v-hasPermi="['kanban:order:print']"
          v-if="canPrint"
        >打印看板</el-button>
        <el-button 
          type="info" 
          @click="handlePrintBoxLabel" 
          v-hasPermi="['kanban:order:print']"
          v-if="canPrint"
        >打印箱标</el-button>
        <el-button 
          type="danger" 
          @click="handleVoid" 
          v-hasPermi="['kanban:order:void']"
          v-if="canVoid"
        >作废</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getKanbanOrder, confirmKanbanOrder, printKanban, printBoxLabel, voidKanbanOrder } from '@/api/kanban/kanbanOrder'

export default {
  name: 'KanbanOrderDetail',
  data() {
    return {
      data: {}
    }
  },
  computed: {
    // 是否可以编辑
    canEdit() {
      return this.data.businessStatus === 10 || this.data.businessStatus === 20
    },
    // 是否可以确认
    canConfirm() {
      return this.data.businessStatus === 20 && this.data.senderConfirmStatus === 0
    },
    // 是否可以打印
    canPrint() {
      return this.data.businessStatus === 30 || this.data.businessStatus === 40
    },
    // 是否可以作废
    canVoid() {
      return this.data.businessStatus !== -10 && this.data.businessStatus !== 60
    }
  },
  created() {
    const id = this.$route.query.id
    if (id) {
      this.getDetail(id)
    }
  },
  methods: {
    // 获取详情
    getDetail(id) {
      getKanbanOrder(id).then(res => {
        this.data = res.data || {}
      }).catch(err => {
        this.$modal.msgError('获取看板详情失败')
        console.error(err)
      })
    },
    // 状态标签类型
    statusTagType(status) {
      const statusMap = {
        10: 'info',
        20: 'warning',
        30: 'success',
        40: 'primary',
        50: 'warning',
        60: 'success',
        '-10': 'danger',
        [-10]: 'danger'
      }
      return statusMap[status] || 'info'
    },
    // 状态标签文本
    statusLabel(status) {
      const statusMap = {
        10: '草稿',
        20: '已创建',
        30: '已确认',
        40: '已发货',
        50: '部分收货',
        60: '全部收货',
        '-10': '已作废',
        [-10]: '已作废'
      }
      return statusMap[status] || status
    },
    // 确认状态标签
    confirmStatusLabel(status) {
      const statusMap = {
        0: '未确认',
        1: '已确认',
        2: '已拒绝',
        '0': '未确认',
        '1': '已确认',
        '2': '已拒绝'
      }
      return statusMap[status] || status
    },
    // 打印状态标签
    printStatusLabel(status) {
      const statusMap = {
        'NOT_PRINTED': '未打印',
        'PRINTED': '已打印'
      }
      return statusMap[status] || status
    },
    // 是否标签
    yesNo(value) {
      return value ? '是' : '否'
    },
    // 跳转编辑
    gotoEdit() {
      this.$router.push({
        path: '/kanban/kanbanOrder/edit',
        query: { id: this.data.id }
      })
    },
    // 确认看板
    handleConfirm() {
      this.$modal.confirm('是否确认该看板订单？').then(() => {
        return confirmKanbanOrder(this.data.id)
      }).then(() => {
        this.$modal.msgSuccess('确认成功')
        this.getDetail(this.data.id)
      }).catch(() => {})
    },
    // 打印看板
    handlePrintKanban() {
      this.$modal.confirm('是否打印看板？').then(() => {
        return printKanban(this.data.id)
      }).then(() => {
        this.$modal.msgSuccess('打印成功')
        this.getDetail(this.data.id)
      }).catch(() => {})
    },
    // 打印箱标
    handlePrintBoxLabel() {
      this.$modal.confirm('是否打印箱标？').then(() => {
        return printBoxLabel(this.data.id)
      }).then(() => {
        this.$modal.msgSuccess('打印成功')
        this.getDetail(this.data.id)
      }).catch(() => {})
    },
    // 作废看板
    handleVoid() {
      this.$modal.confirm('是否作废该看板订单？作废后不可恢复！', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return voidKanbanOrder(this.data.id)
      }).then(() => {
        this.$modal.msgSuccess('作废成功')
        this.getDetail(this.data.id)
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.panel-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin: 20px 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #409EFF;
}

.item {
  padding: 8px 0;
  line-height: 1.5;
}

.item b {
  color: #606266;
  font-weight: normal;
}

.ml10 {
  margin-left: 10px;
}

.mt20 {
  margin-top: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>